<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">

    {{#if title}}
    <title>{{ title }}</title>
    {{else}}
    <title>Altair</title>
    {{/if}}

    <base href="https://unpkg.com/altair-static@latest/build/dist/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        {{#if options}}
        AltairGraphQL.init({{{ toJson options }}});
        {{else}}
        AltairGraphQL.init();
        {{/if}}
      });
    </script>
    <app-root>
      <style>
        .loading-screen {
          /*Prevents the loading screen from showing until CSS is downloaded*/
          display: none;
        }
      </style>
      <div class="loading-screen styled">
        <div class="loading-screen-inner">
          <div class="loading-screen-logo-container">
            <img src="assets/img/logo_350.svg" alt="Altair">
          </div>
          <div class="loading-screen-loading-indicator">
            <span class="loading-indicator-dot"></span>
            <span class="loading-indicator-dot"></span>
            <span class="loading-indicator-dot"></span>
          </div>
        </div>
      </div>
    </app-root>
    <script type="text/javascript" src="runtime.js"></script>
    <script type="text/javascript" src="polyfills.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>

</html>